<template>
  <div class="indexContainer bannerWrapper">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="18" :lg="7" :xl="7">
        <div class="hotProduct">
          <div class="bannerTitle">
            <h2>最新产品</h2>
            <router-link to="/ApplicationProducts">更多 >></router-link>
          </div>
          <div class="productList">
            <el-empty :image-size="100" v-if="proData.length == 0" description="暂无数据"></el-empty>
            <ul>
              <li @click="handleProDetail(item.id)" class="singleLine" v-for="item in proData" :key="item.id">{{
                item.title }}</li>
            </ul>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="18" :lg="10" :xl="10">
        <div class="indexBanner">
          <swiper ref="mySwiper" :options="swiperOptions">
            <swiper-slide>
              <img ref="bannerHeight" @load="imgLoad" src="@/assets/img/banner1.png" alt="" />
            </swiper-slide>
            <swiper-slide>
              <img ref="bannerHeight" @load="imgLoad" src="@/assets/img/banner1.png" alt="" />
            </swiper-slide>
            <swiper-slide>
              <img ref="bannerHeight" @load="imgLoad" src="@/assets/img/banner1.png" alt="" />
            </swiper-slide>
            <!-- 小点点 -->
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="18" :lg="7" :xl="7">
        <div class="hotProduct">
          <div class="bannerTitle">
            <h2>最新资讯</h2>
            <router-link to="/information">更多 >></router-link>
          </div>
          <div class="productList">
            <el-empty :image-size="100" v-if="newData.length == 0" description="暂无数据"></el-empty>
            <ul>
              <li @click="handleDetail(item.id)" class="singleLine" v-for="item in newData" :key="item.id">{{ item.title
              }}</li>
            </ul>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 首页banner图 -->

  </div>
</template>
<script>
import { getProductList, getNewList } from "@/request/api/index";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  components: {
    swiper,
    swiperSlide,
  },
  data() {
    return {
      isOpen: false, //打开
      isShrink: true, //收缩
      isShow: false,
      proData: [],
      newData: [],
      questionData: [],
      bannerHeight: "",
      userId: '',
      // 样式写在这里边
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination", //与slot="pagination"处 class 一致
          clickable: true, //轮播按钮支持点击
        },
        effect: 'fade',
        flipEffect: {
          slideShadows: true, //slides的阴影。默认true。
          limitRotation: true, //限制最大旋转角度为180度，默认true。
        },
        //自动播放
        autoplay: {
          delay: 5000,
          disableOnInteraction: false,
        },
        //循环
        loop: true,
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
  created() {
    this.getProduct()
    this.getNew()
    if (window.sessionStorage.getItem("userInfo") !== null) {
      let userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
      this.userId = userInfo.id
    }
  },
  mounted() {
    this.imgLoad();
    // window.addEventListener(
    //   "resize",
    //   () => {
    //     this.bannerHeight = this.$refs.bannerHeight[0].height;
    //     this.imgLoad();
    //   },
    //   false
    // );
  },
  methods: {
    //获取最新产品  
    getProduct() {
      let params = {
        current: 1,
        pageSize: 10,
        sort: 'desc',
        generalName: 'shelf_time'
      }
      getProductList(params).then(res => {
        if (res.data.code == 1) {
          this.proData = res.data.data.totalList
        }
      })
    },
    //获取最新资讯
    getNew() {
      let params = {
        current: 1,
        pageSize: 10,
      }
      getNewList(params).then(res => {
        if (res.data.code == 1) {
          this.newData = res.data.data.totalList
        }
      })
    },
    imgLoad() {
      this.$nextTick(() => {
        this.bannerHeight = this.$refs.bannerHeight.height;
      });
    },
    // 资讯详情
    handleDetail(id) {
      this.$router.push({
        name: "informationDetail",
        query: {
          id,
        },
      });
    },
    // 产品详情
    handleProDetail(id) {
      this.$router.push({
        name: "ApplicationProductsDetail",
        query: {
          id,
          userId: this.userId
        }
      });
    }
  },
};
</script>
<style lang="less" scoped>
@import "./banner.less";
</style>
